<f:view id="ajaxEcho" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">
	<h:head />
		<h:body>
			 <ui:composition>
				<p:tab title="Experiencia Profissional">
						<h:panelGrid columns="2" columnClasses="label, value">
						<h:panelGroup id="experienciasProfissionais" >
							<div>
							   <p:panel style="margin-top: 5%; widh:60%">
										<p:panel rendered="#{empty pessoaController.pessoa.experienciaProfissionais}">
											<h:outputText value="#{msg['experiencia.naoHaExperiencia']}" />
										</p:panel>
										<ui:repeat  id="experienciaProfissional" var="experienciaProfissional" value="#{pessoaController.pessoa.experienciaProfissionais}">
											<h:outputText value="#{msg['experiencia.nomeEmpresa']}: " /><h:outputText value="*" style="color: red; font-style:oblique"/><br/>
											<p:inputText required="true" size="30" value="#{experienciaProfissional.nomeEmpresa}" readonly="${readonly}" requiredMessage="Nome da Empresa é Obrigátorio"/><br/><br/>
											
											<h:outputText value="#{msg['experiencia.cargo']}: " /><h:outputText value="*" style="color: red; font-style:oblique"/><br/>
											<p:inputText required="true" size="30" value="#{experienciaProfissional.cargo}" readonly="${readonly}" requiredMessage="O cargo é Obrigátorio" /><br/><br/>
											
											<h:outputText value="#{msg['experiencia.dataInicio']}: " /><h:outputText value="*" style="color: red; font-style:oblique"/><br/>
											<p:calendar id="dataInicio" value="#{experienciaProfissional.dataInicio}"  rendered="${!readonly}" pattern="dd/MM/yyyy" mask="true" required="true" 
														requiredMessage="A data Inicio é Obrigátorio">
		        							</p:calendar><br/><br/>
											<p:inputMask value="#{experienciaProfissional.dataInicio}" mask="99/99/9999" readonly="${readonly}" rendered="${readonly}">
		 										<f:convertDateTime pattern="dd/MM/yyyy" />
		 									</p:inputMask>
											
											<h:outputText value="#{msg['experiencia.dataFim']}: " /><h:outputText  value="*" style="color: red; font-style:oblique"/><br/>
											<p:calendar id="dataFim" value="#{experienciaProfissional.dataFim}"  rendered="${!readonly}" pattern="dd/MM/yyyy" mask="true" required="true" 
														requiredMessage="A data Fim é Obrigátorio">
		        							</p:calendar><br/><br/>
											<p:inputMask value="#{experienciaProfissional.dataFim}" mask="99/99/9999" readonly="${readonly}" rendered="${readonly}">
		 										<f:convertDateTime pattern="dd/MM/yyyy" />
		 									</p:inputMask>
											
		
											<h:outputText value="#{msg['experiencia.descricao']}: " /><br/>
											<p:inputTextarea rows="6" cols="33" value="#{experienciaProfissional.descricao}" readonly="${readonly}" /> <br/><br/>
											<p:commandButton id="excluir" value="#{msg['experiencia.excluirExperiencia']}" action="#{pessoaController.excluirExperiencia(experienciaProfissional)}"  ajax="false" update="experienciasProfissionais"  rendered="#{!readonly}" immediate="true" process="@this" icon="ui-icon-trash"/><br/>
											<br/>
											<p:separator rendered="#{not empty pessoaController.pessoa.experienciaProfissionais and pessoaController.pessoa.experienciaProfissionais.size() >1}"/>
											<br/>
										</ui:repeat>
										<h:outputText rendered="#{not empty pessoaController.pessoa.experienciaProfissionais}" value="Total de Experiências: #{pessoaController.pessoa.experienciaProfissionais.size()}" style="font-weight: bold;"/>
									
								</p:panel>
								
								<br/>
								<p:commandButton  value="#{msg['experiencia.adicionarExperiencia']}" actionListener="#{pessoaController.pessoa.adicionarNovaExperienciaProfissional()}" process="experienciasProfissionais" update="experienciasProfissionais" rendered="#{!readonly}" icon="ui-icon-plus"/>
							</div>
						</h:panelGroup>
					</h:panelGrid>
				</p:tab>
			</ui:composition>
	</h:body>
</f:view>